<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		@keyframes moz{
			0%,100%{
				clip:rect(0px,345px,2px,0px);
			}
			
			25%{
				clip:rect(0px,2px,320px,0px);
			}
			50%{
				clip:rect(315px,345px,320px,0px);
			}
			75%{
				clip:rect(0px,340px,320px,338px);
			}
		}
		
		
		
		.box{
			width: 335.53px;
			height: 313.469px;
			/*width: 30%;
			height: 30%;*/
			background-color: tan;
			position: absolute;
			border: 2px red solid;
			/*clip:rect(315px,345px,320px,0px);*/
			animation: moz 15s linear infinite;
		}
	</style>
	<body>
		
		<div class="box">
			
		</div>
		
	</body>
	<script>
		
window.onload=function(){
	var oDiv1 = document.getElementsByClassName('leftMiddle')[0];
var oDiv1width=window.getComputedStyle(oDiv1,'::before').getPropertyValue('width');
oDiv1width=oDiv1width.slice(0,-2);

	var num=oDiv1width;
	console.log(oDiv1width );
//	var wight1=345/num;
//	console.log(wight1);
//	
//var tt=document.styleSheets[0];
//	
//tt.deleteRule(6);//清除之前写入的动画样式
//	
//tt.insertRule("@keyframes clipMe {0%,100%{clip:rect(0px,345px,2px,0px);}25%{clip:rect(0px,2px,322px,0px);}50%{clip:rect(316px,344px,320px,0px)}75%{clip:rect(0px,349px,320px,341px)}}",6);//写入样式
//	
}
//
//
//var tt=document.styleSheets[0];
//console.log(tt);
//tt.deleteRule(6);//清除之前写入的动画样式
//console.log(tt);
//
//


//tt.insertRule("@keyframes mymove{0%{} 100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}",6);//写入样式

//
//@keyframes moz{
//			0%,100%{
//				clip:rect(0px,345px,2px,0px);
//			}
//			
//			25%{
//				clip:rect(0px,2px,322px,0px);
//			}
//			50%{
//				clip:rect(316px,345px,320px,0px);
//			}
//			75%{
//				clip:rect(0px,345px,320px,341px);
//			}
//		}




	</script>
</html>
